<template>
  <a-collapse-panel>
    <template #header>图例设置</template>
    <a-form-item :name="['chart', 'legend', 'show']" label="显示图例">
      <a-switch v-model:checked="chart.legend.show" />
    </a-form-item>
    <a-form-item :name="['chart', 'legend', 'textStyle', 'fontSize']" label="字体大小">
      <a-input-number v-model:value="chart.legend.textStyle.fontSize" placeholder="请输入" :min="12" :max="25" />
    </a-form-item>
    <a-form-item :name="['chart', 'legend', 'orient']" label="布局">
      <jnpf-radio
        v-model:value="chart.legend.orient"
        :options="orientOptions"
        :disabled="!chart.legend.show"
        optionType="button"
        button-style="solid"
        class="right-radio" />
    </a-form-item>
  </a-collapse-panel>
</template>

<script setup lang="ts">
  defineProps(['chart', 'dataSetList']);

  const orientOptions = [
    { id: 'horizontal', fullName: '横向' },
    { id: 'vertical', fullName: '纵向' },
  ];
</script>
